<template>
    <div class="evection-record">
        <my-breadcrumb :breadcrumb="['我发起的流程','请假申请']"/>
        <el-table :data="leaveData" size="small">
            <el-table-column label="请假类型" prop="holidayTypeName" width="100px" show-overflow-tooltip/>
            <el-table-column label="请假原因" prop="cause"/>
            <el-table-column label="请假开始时间" prop="beginTime" width="160px"/>
            <el-table-column label="请假结束时间" prop="endTime" width="160px"/>
            <el-table-column label="天数" width="60px">
                <template #default="s">
                    {{s.row.days}}
                </template>
            </el-table-column>
            <el-table-column label="流程状态">
                <template #default="s">
                    <el-tag type="warning" v-if="!s.row.end">审批中</el-tag>
                    <el-tag type="success" v-if="s.row.end">已结束</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="当前节点" prop="currentNode">
                <template #default="s">
                    <template v-if="s.row.currentNode">
                        {{s.row.currentNode}}
                    </template>
                    <template v-else>
                        <span style="color: rgb(190 190 190);">空</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="处理人员">
                <template #default="s">
                    <template v-if="s.row.assigneeEmp">
                        {{s.row.assigneeEmp.empName}}
                    </template>
                    <template v-else>
                        <span style="color: rgb(190 190 190);">空</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="applicDate" width="180px"/>
            <el-table-column label="审批结果" width="100px">
                <template #default="s">
                    <template v-if="s.row.end">
                        <el-tag type="danger" v-if="s.row.approved===false">未通过</el-tag>
                        <el-tag type="success" v-if="s.row.approved">已通过</el-tag>
                    </template>
                    <template v-else>
                        <span style="color: rgb(190 190 190);">空</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="s">
                    <el-button type="default" size="small" plain @click="lookEvectionDetailClick(s.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {queryMyStartEvection} from "../../../network/process/evection-process";
import MyBreadcrumb from "../../../components/MyBreadcrumb.vue";
import {queryPersonalLeaveProcess} from "../../../network/process/leave-process";

export default {
    name: "PersonalLeaveRecord",
    components: {MyBreadcrumb},
    data(){
        return{
            leaveData: []
        }
    },
    methods:{
        lookEvectionDetailClick(row){
            // let detail = this.$refs.leaveDetailRef;
            // detail.processInstanceId = row.processInstanceId;
            // detail.visible = true;
        },
        loadMyStartLeave(){
            queryPersonalLeaveProcess(this.$store.state.loginUser.id).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.leaveData = vo.data
                    },
                    log: '请假申请记录'
                })
            })
        }
    },
    created() {
        this.loadMyStartLeave();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.evection-record{
    min-height: 99%;
    background: white;
}
</style>